<div class="code-viewer-container">
  <!-- 头部信息栏 -->
  <div class="header-bar">
    <div class="file-info">
      <h2 class="file-title">代码查看器</h2>
      <span class="file-details" *ngIf="codeData">{{ getFileInfo() }}</span>
      <span class="syntax-support" *ngIf="codeData && isSyntaxHighlightSupported()">
        ✨ 语法高亮支持 ({{ getCurrentLanguage() }})
      </span>
    </div>
    <div class="actions">
      <button 
        class="btn btn-toggle" 
        [class.active]="useMonacoEditor"
        (click)="toggleMonacoEditor()" 
        [disabled]="loading || monacoLoading"
        title="切换代码编辑器模式"
      >
        <span *ngIf="monacoLoading">⏳ 加载中...</span>
        <span *ngIf="!monacoLoading && useMonacoEditor">🎯 Monaco编辑器</span>
        <span *ngIf="!monacoLoading && !useMonacoEditor">📝 自定义渲染</span>
      </button>
      <a 
        class="btn btn-link" 
        routerLink="/virtual-code-viewer"
        title="体验虚拟滚动版本"
      >
        🚀 虚拟滚动版本
      </a>
      <button class="btn btn-secondary" (click)="reloadData()" [disabled]="loading">
        <span *ngIf="loading">加载中...</span>
        <span *ngIf="!loading">重新加载</span>
      </button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div *ngIf="loading" class="loading-container">
    <div class="loading-spinner"></div>
    <p>正在加载代码内容...</p>
  </div>

  <!-- 错误状态 -->
  <div *ngIf="error && !loading" class="error-container">
    <div class="error-icon">⚠️</div>
    <p class="error-message">{{ error }}</p>
    <button class="btn" (click)="reloadData()">重试</button>
  </div>

  <!-- 主内容区域 -->
  <div *ngIf="!loading && !error && codeData" class="main-content">
    <!-- 区域信息面板 -->
    <div class="regions-panel">
      <h3>显示区域</h3>
      <div class="regions-list">
        <div 
          *ngFor="let region of getVisibleRegions(); let i = index" 
          class="region-item"
        >
          <div class="region-info">
            <span class="region-name">区域 {{ i + 1 }}</span>
            <span class="region-lines">第 {{ region.startLine }} - {{ region.endLine }} 行</span>
          </div>
          <div class="region-status">
            <span 
              class="status-badge"
              [style.background-color]="region.backgroundColor"
              [style.color]="region.backgroundColor ? '#333' : '#155724'"
            >
              已显示
            </span>
          </div>
        </div>
      </div>
      
      <!-- 快速操作 -->
      <div class="quick-actions">
        <h4>快速操作</h4>
        <button class="btn-action" (click)="expandAll()">展开所有隐藏行</button>
        <button class="btn-action" (click)="collapseAll()">重置显示</button>
      </div>

      <!-- 语法高亮信息 -->
      <div class="syntax-info" *ngIf="codeData">
        <h4>语法高亮</h4>
        <div class="syntax-status">
          <span class="language-tag">{{ getCurrentLanguage().toUpperCase() }}</span>
          <span 
            class="support-status" 
            [class.supported]="isSyntaxHighlightSupported()"
            [class.not-supported]="!isSyntaxHighlightSupported()"
          >
            {{ isSyntaxHighlightSupported() ? '✓ 已启用' : '✗ 不支持' }}
          </span>
        </div>
      </div>
    </div>

    <!-- 编辑器容器 -->
    <div class="editor-container">
      <div class="editor-header">
        <span class="editor-title">{{ codeData.fileContent.filename }}</span>
        <span class="editor-language">{{ codeData.fileContent.language }}</span>
        <div class="editor-mode-indicator">
          <span class="mode-label">渲染模式:</span>
          <span class="mode-name" [class.monaco]="useMonacoEditor" [class.custom]="!useMonacoEditor">
            {{ useMonacoEditor ? 'Monaco编辑器' : '自定义渲染' }}
          </span>
        </div>
      </div>

      <!-- Monaco Editor错误提示 -->
      <div *ngIf="monacoError" class="monaco-error">
        <div class="error-icon">⚠️</div>
        <p>{{ monacoError }}</p>
        <button class="btn btn-small" (click)="useMonacoEditor = false">切换到自定义渲染</button>
      </div>
      
      <!-- 自定义代码显示区域 -->
      <div *ngIf="!useMonacoEditor" class="code-display-container">
        <div class="line-container" *ngFor="let line of getDisplayLines(); let i = index">
          <!-- 普通代码行 -->
          <div 
            *ngIf="!line.isCollapsedPlaceholder" 
            class="code-line"
            [class.original-visible]="line.lineType === 'original_visible'"
            [class.manually-expanded]="line.lineType === 'manually_expanded'"
            [style.background-color]="line.backgroundColor || 'transparent'"
          >
            <span class="line-number">{{ line.lineNumber }}</span>
            <!-- 使用高亮后的内容，如果没有则使用原始内容 -->
            <code 
              class="line-content" 
              [innerHTML]="line.highlightedContent ? getSafeHtml(line.highlightedContent) : line.content"
            ></code>
          </div>
          
          <!-- 折叠占位符行 -->
          <div *ngIf="line.isCollapsedPlaceholder" class="collapsed-line">
            <!-- 行号区域带展开按钮 - 垂直排列：行号->向下展开->全部展开->向上展开->行号 -->
            <div class="line-number-expand-area">
              <!-- 起始行号 -->
              <div class="line-number-item start-line">{{ line.hiddenLineStart }}</div>
              
              <!-- 向下展开5行图标 -->
              <div 
                class="line-number-item expand-icon expand-down-icon" 
                (click)="expandDownward(line.hiddenLineStart!, line.hiddenLineEnd!, i)"
                title="向下展开5行"
              >▼</div>
              
              <!-- 展开全部按钮 -->
              <div 
                class="line-number-item expand-icon expand-all-icon" 
                (click)="expandHiddenRegion(line.hiddenLineStart!, line.hiddenLineEnd!, i)"
                title="展开这 {{ line.hiddenLineEnd! - line.hiddenLineStart! + 1 }} 行代码"
              >●</div>
              
              <!-- 向上展开5行图标 -->
              <div 
                class="line-number-item expand-icon expand-up-icon" 
                (click)="expandUpward(line.hiddenLineStart!, line.hiddenLineEnd!, i)"
                title="向上展开5行"
              >▲</div>
              
              <!-- 结束行号 -->
              <div class="line-number-item end-line">{{ line.hiddenLineEnd }}</div>
            </div>
            
            <!-- 折叠内容显示 -->
            <div class="collapsed-content">
              <span class="collapsed-text">⋯ {{ line.hiddenLineEnd! - line.hiddenLineStart! + 1 }} 行被折叠 ⋯</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Monaco 编辑器 -->
      <div 
        *ngIf="useMonacoEditor" 
        #editorContainer 
        class="monaco-editor-wrapper"
      >
        <div *ngIf="monacoLoading" class="monaco-loading">
          <div class="loading-spinner"></div>
          <p>正在加载Monaco编辑器...</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 使用说明 -->
  <div *ngIf="!loading && !error && codeData" class="help-panel">
    <details>
      <summary>使用说明</summary>
      <div class="help-content">
        <ul>
          <li>页面显示代码文件的指定区域，<strong>带颜色背景的是原始显示区域</strong></li>
          <li>代码支持<strong>语法高亮</strong>，关键字、字符串、注释等会以不同颜色显示</li>
          <li>点击折叠行中的"展开"按钮来查看隐藏的代码（无背景色）</li>
          <li>左侧面板显示当前可见区域的信息，颜色标签表示该区域背景色</li>
          <li>使用快速操作可以一键展开所有隐藏行或重置显示</li>
        </ul>
      </div>
    </details>
  </div>
</div> 